After Webpack compiles the files of my web application into a bundle.js, I need source maps to debug when viewing my application in the browser. The problem is that I cannot seem to generate those Source Maps.

The command I use to launch is

npx webpack serve --config ./webpack.config.js --mode development

The application works fine afterwards except that I cannot debug errors in script.js file when viewing the application in Chrome or Firefox. Instead, the browser console just shows an error in script.js:formatted, which is a one-line file with all my code:

module.exports = " [here is all my code]"

I have the following webpack.config.js file. Note that I include the line devtool: "inline-source-map" (I have also tried devtool: "source-map")`.

//This is my webpack.config.js file
var glob = require("glob");

module.exports = {
  devtool: "inline-source-map",
  entry: {
    app: ['./js/script.js', './style/style.scss', ...glob.sync('./assets/*.png')],
  },
  mode: "development",
  output: {
    filename: './bundle.js',
    path: __dirname,
    sourceMapFilename: "script.js.map"
  },
  devServer: {
    static: './dist',
    hot: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "script-loader"
        }
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ]
  },
};